import React from 'react';
import { Table, Radio, Input } from 'antd';
import styles from './index.less';

const { Column } = Table;

const AccessTable = React.forwardRef(({ value = [], onChange = () => {}, readOnly, ...rest }, ref) => {
    const dataSource = React.useMemo(() => {
        // 合并单元格所需数据格式
        const finalCombineCellData = [];

        (value || []).forEach(({ content = [], project, weight, id, score, remark }, i) => {
            (content || []).forEach(({ label, value: _value }, index) => {
                const payload = {
                    uid: id,
                    order: i + 1,
                    project,
                    weight,
                    content: label,
                    score: _value,
                    currentScore: score,
                    remark,
                    idRowSpan: index === 0 ? content.length + 1 : 0,
                    projectRowSpan: index === 0 ? content.length : 0
                };
                finalCombineCellData.push(payload);
                if (index === content.length - 1) {
                    finalCombineCellData.push({
                        ...payload,
                        project: '评语',
                        idRowSpan: 0,
                        projectRowSpan: 1,
                        projectRolSpan: 3
                    });
                }
            });
        });

        const combineCellData = finalCombineCellData.map((item, index) => ({ ...item, id: Number(index) + 1 }));

        return combineCellData;
    }, [value]);

    const handleChange = (id, payload) => {
        const finalValue = value.map(item => {
            if (item.id === id) {
                return { ...item, ...payload };
            }
            return item;
        });
        onChange(finalValue);
    };

    return (
        <Table
            className={styles.table}
            rowKey="id"
            dataSource={dataSource}
            bordered
            pagination={false}
            ref={ref}
            scroll={{ y: true }}
            {...rest}
        >
            <Column
                align="center"
                width={80}
                title="序号"
                dataIndex="order"
                key="order"
                render={(text, row) => ({
                    children: text,
                    props: {
                        rowSpan: row.idRowSpan
                    }
                })}
            />
            <Column
                width={150}
                align="center"
                title="评估项目"
                dataIndex="project"
                key="project"
                render={(text, row) => ({
                    children: text,
                    props: {
                        rowSpan: row.projectRowSpan || 0
                    }
                })}
            />
            <Column
                width={110}
                align="center"
                title="权重占比"
                dataIndex="weight"
                key="weight"
                render={(text, row) => {
                    if (row.project === '评语') {
                        return {
                            children: readOnly ? (
                                row.remark
                            ) : (
                                <Input.TextArea
                                    placeholder="请输入"
                                    value={row.remark}
                                    onChange={e => {
                                        handleChange(row.uid, { remark: e.target.value });
                                    }}
                                    maxLength={500}
                                />
                            ),
                            props: {
                                rowSpan: row.projectRowSpan || 0,
                                colSpan: 3
                            }
                        };
                    }
                    return {
                        children: `${text}%`,
                        props: {
                            rowSpan: row.projectRowSpan || 0
                        }
                    };
                }}
            />
            <Column
                title="评估标准"
                dataIndex="content"
                key="content"
                render={(text, row) => ({
                    children: text,
                    props: {
                        colSpan: row.project === '评语' ? 0 : 1
                    }
                })}
            />
            <Column
                align="center"
                title="得分"
                dataIndex="score"
                key="score"
                width={90}
                render={(text, row) => ({
                    children: (
                        <Radio
                            disabled={readOnly}
                            checked={String(row.currentScore) === String(row.score)}
                            onChange={() => {
                                handleChange(row.uid, { score: text });
                            }}
                        >
                            {text}
                        </Radio>
                    ),
                    props: {
                        colSpan: row.project === '评语' ? 0 : 1
                    }
                })}
            />
        </Table>
    );
});

export default AccessTable;
